<template>
	<view>
		<uni-segmented-control :values="typelist" styleType="text" @clickItem="change"></uni-segmented-control>
		<view v-show="type==0">
			<uni-card margin="1" padding="0" style="padding: 10rpx;">
				<textarea v-model="form.content" class="content" placeholder="描述一下闲置的详情" maxlength="200"></textarea>
				<view style="display: flex;flex-wrap: wrap;">
					<view v-for="(i,index) in imageList" style="position: relative;">
						<image class="img1" :src="i"></image>
						<view class="remove" @click="remove(index)">删除</view>
					</view>
					<view class="view1" @click="addimg">
						<image src="../../static/jia.png" style="height: 150rpx;width: 150rpx;margin-top: 36rpx;">
						</image>
					</view>
				</view>
			</uni-card>
			<uni-card margin="1" padding="0" style="padding: 10rpx;">
				<uni-forms v-model="form" label-align="center" border label-width="140rpx" :rules="rule" ref="form1">
					<uni-forms-item label="标题" name="title">
						<uni-easyinput type="text" placeholder="请输入标题" maxlength="30"
							v-model="form.title"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="价格" name="price">
						<uni-number-box v-model="form.price" :max="999999" style="width: 500rpx;" />
					</uni-forms-item>
					<uni-forms-item label="成色" name="damageDegree">
						<uni-data-select v-model="form.damageDegree" :localdata="chengse"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="颜色" name="color">
						<uni-easyinput type="text" placeholder="请输入颜色" maxlength="6"
							v-model="form.color"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="购买渠道" name="buyWay">
						<uni-easyinput type="text" placeholder="请输入购买渠道" maxlength="8"
							v-model="form.buyWay"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="电话" name="phone">
						<uni-easyinput type="number" placeholder="请输入电话" maxlength="11"
							v-model="form.phone"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="其他联系方式" name="other">
						<uni-easyinput type="text" placeholder="请输入联系方式" maxlength="20"
							v-model="form.other"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
				<button @click="send" type="primary" style="border-radius: 80rpx;margin-top: 50rpx;">提交</button>
			</uni-card>
		</view>
		<view v-show="type==1">
			<uni-card margin="1" padding="0" style="padding: 10rpx;">
				<textarea v-model="postbar.content" class="content" placeholder="请输入文章内容" maxlength="200"></textarea>
				<view style="display: flex;flex-wrap: wrap;">
					<view v-for="(i,index) in imageList1" style="position: relative;">
						<image class="img1" :src="i"></image>
						<view class="remove" @click="remove1(index)">删除</view>
					</view>
					<view class="view1" @click="addimg1">
						<image src="../../static/jia.png" style="height: 150rpx;width: 150rpx;margin-top: 36rpx;">
						</image>
					</view>
				</view>
			</uni-card>
			<uni-card margin="1" padding="0" style="padding: 10rpx;">
				<uni-forms v-model="postbar" label-align="center" border label-width="140rpx" :rules="rule1" ref="form2">
					<uni-forms-item label="标题" name="title">
						<uni-easyinput type="text" placeholder="请输入标题" maxlength="30"
							v-model="postbar.title"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
				<button @click="sendpostbar" type="primary" style="border-radius: 80rpx;margin-top: 50rpx;">提交</button>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	import {
		addpostbar1,
		addproduct,
		selectschoolname
	} from '../../api/myapi';
	export default {
		data() {
			return {
				typelist: ["卖东西", "发帖子"],
				postbar: {
					content: "",
					image: ""
				},
				type: 0,
				imageList: [],
				imageList1: [],
				fileList: [],
				form: {
					image: "",
					content: "",
					price:0
					
				},
				baseUrl: config.baseUrl,
				rule1: {
					title: {
						rules: [{
							required: true,
							errorMessage: '标题不能为空'
						}]
					}
				},
				rule: {
					title: {
						rules: [{
							required: true,
							errorMessage: '标题不能为空'
						}]
					},
					price: {
						rules: [{
							required: true,
							errorMessage: '价格不能为空'
						}]
					},
					damageDegree: {
						rules: [{
							required: true,
							errorMessage: '成色不能为空'
						}]
					},
					color: {
						rules: [{
							required: true,
							errorMessage: '颜色不能为空'
						}]
					},
					buyWay: {
						rules: [{
							required: true,
							errorMessage: '购买渠道不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '电话不能为空'
						}, {
							pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
							errorMessage: '请输入正确的手机号码'
						}]
					},
					other: {
						rules: [{
							required: true,
							errorMessage: '其他联系方式不能为空'
						}]
					}
				},
				chengse: [{
						value: "全新",
						text: "全新"
					},
					{
						value: "99新",
						text: "99新"
					},
					{
						value: "95新",
						text: "95新"
					},
					{
						value: "9成新",
						text: "9成新"
					},
					{
						value: "8成新",
						text: "8成新"
					},
					{
						value: "7成新",
						text: "7成新"
					},
				]
			}
		},
		methods: {
			change(i) {
				this.type = i.currentIndex
			},
			sendpostbar() {
				this.$refs.form2.validate().then((res) => {
					if (this.postbar.content.length > 15) {
						uni.showLoading({
							title: "正在发布中"
						})
						this.imageList1.map((i) => {
							console.log(i);
							uni.uploadFile({
								url: this.baseUrl + "/common/upload",
								filePath: i,
								header: {
									Authorization: uni.getStorageSync('App-Token')
								},
								name: 'file',
								success: (n) => {
									let r = JSON.parse(n.data)
									this.postbar.image = this.postbar.image + r.url + ","
								}
							})
						})
						setTimeout(async () => {
							console.log(this.postbar);
							let r1 = await selectschoolname({
								id: uni.getStorageSync("userid")
							})
							console.log(r1);
							this.postbar.image = this.postbar.image.substring(0, this.postbar.image.length - 1)
							this.postbar.userid = uni.getStorageSync('userid')
							this.postbar.school = r1.data.userSchool
							let r = await addpostbar1(this.postbar)
							console.log(r);
							this.postbar.image = ""
							this.postbar.content = ""
							this.postbar.title = ""
							this.imageList1.splice(0, this.imageList1.length)
							uni.hideLoading()
							this.$modal.msg(r.msg)
						}, 2000)
					}else {
						this.$modal.msg("内容不能少于15个字")
					}
				})
			},
			send() {
				this.$refs.form1.validate().then((res) => {
					if (this.form.content.length > 15) {
						uni.showLoading({
							title: "正在发布中"
						})
						this.imageList.map((i) => {
							console.log(i);
							uni.uploadFile({
								url: this.baseUrl + "/common/upload",
								filePath: i,
								header: {
									Authorization: uni.getStorageSync('App-Token')
								},
								name: 'file',
								success: (n) => {
									let r = JSON.parse(n.data)
									this.form.image = this.form.image + r.url + ","
								}
							})
						})


						setTimeout(async () => {
							console.log(this.form);
							this.form.image = this.form.image.substring(0, this.form.image.length - 1)
							this.form.userid = uni.getStorageSync('userid')
							let r = await addproduct(this.form)
							console.log(r);
							this.form.image = ""
							this.form.content = "",
							this.form.title = ""
							this.form.price = ""
							this.form.color = ""
							this.form.damageDegree = ""
							this.form.buyWay = ""
							this.form.phone = ""
							this.form.other = ""
							this.imageList.splice(0, this.imageList.length)
							uni.hideLoading()
							this.$modal.msg(r.msg)
						}, 2000)
					} else {
						this.$modal.msg("内容不能少于15个字")
					}
				})
			},
			remove(index) {
				this.imageList.splice(index, 1)
			},
			remove1(index) {
				this.imageList1.splice(index, 1)
			},
			addimg() {
				if (this.imageList.length < 9) {
					uni.chooseImage({
						count: 9,
						success: (i) => {
							console.log(i);
							let list = i.tempFilePaths
							list.map((r) => {
								this.imageList.push(r)
							})
						}
					})
				} else {
					this.$modal.msg("最多只能九张图片")
				}
			},
			addimg1() {
				if (this.imageList1.length < 9) {
					uni.chooseImage({
						count: 9,
						success: (i) => {
							console.log(i);
							let list = i.tempFilePaths
							list.map((r) => {
								this.imageList1.push(r)
							})
						}
					})
				} else {
					this.$modal.msg("最多只能九张图片")
				}
			}
		}
	}
</script>

<style>
	.remove {
		position: absolute;
		bottom: 180rpx;
		right: 20rpx;
		z-index: 1;
		color: black;
	}

	.content {
		width: 100%;
		padding: 10rpx;
		height: 300rpx;
	}

	.view1 {
		width: 210rpx;
		height: 210rpx;
		border-radius: 20rpx;
		background-color: #DCDCDC;
		text-align: center;
		margin-left: 10rpx;
		margin-top: 10rpx;
	}

	.img1 {
		width: 210rpx;
		height: 210rpx;
		border-radius: 20rpx;
		margin-left: 10rpx;
		border: 1rpx solid #DCDCDC;
		margin-top: 10rpx;
	}

	.title1 {
		border-bottom: 1rpx #c0c0c0 solid;
		padding: 6rpx;
		font-size: 36rpx;
		margin: 10rpx 6rpx;
	}
</style>